//注册界面
<template>
  <div class="register_form">
    <!--     input 框: trim 自动过滤用户输入的首尾空格 -->
    <div class="item">
      <el-input v-model.trim="ID" placeholder=" 请输入账号 "/>
    </div>
    <div class="item">
      <el-input type="password" v-model.trim="password" placeholder=" 请输入密码"/>
    </div>
    <div class="item">
      <el-input type="password" v-model.trim="confrimPassword" placeholder=" 请再次输入密码"/>
    </div>
    <div class="item">
      <el-input v-model.trim="email" placeholder=" 请输入邮箱"/>
    </div>
    <div>
      <el-button type="primary" @click="register">注册</el-button>
      <!--      <el-button type="primary" @click="cancel">取消</el-button>-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  methods: {
    // 注册界面取消按钮函数
    cancel () {
      // 返回上一页，如果没有上一页返回首页
      if (window.history.length <= 1) {
        this.$router.push({path: '/'})
        return false
      } else {
        this.$router.go(-1)
      }
    },
    // 注册界面登录按钮函数
    register () {
      if (!this.ID) {
        // this.$message.error 常用于主动操作的反馈提示
        this.$message.error('请输入用户名')
        return
      }
      if (!this.password) {
        this.$message.error('请输入密码')
        return
      }
      if (!this.confrimPassword || this.password !== this.confrimPassword) {
        this.$message.error('请保证确认密码与输入密码一致')
        return
      }
      if (!this.email) {
        this.$message.error('请输入邮箱')
        return
      }
      // eslint-disable-next-line no-unused-vars
      let that = this
      console.log(this.ID)
      console.log(this.password)
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/register')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      // let user = {name: '', sex: '', id: this.ID, password: this.password, email: this.email, points: 0}
      let user = {id: this.ID, password: this.password}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            console.log(xmlhttp.responseURL)
            console.log(xmlhttp.response)
            if (xmlhttp.response === 'true') {
              alert('注册成功')
            } else {
              alert(xmlhttp.response)
            }
          }
        }
      }
      xmlhttp.send(JSON.stringify(user))

      location.reload()
    }
  },
  data () {
    return {
      // 新建了名为radio的数据模型，通过v-model把两个单选按钮都绑定radio
      radio: 'stu',
      ID: '',
      password: '',
      confrimPassword: '',
      email: ''
    }
  }
}
</script>

<style scoped>
  .register_form {
    margin-top: 1%;
  }
  .item {
    margin-left:20%;
    margin-top:2%;
    margin-bottom:2%;
    width: 60%;

  }
</style>
